<template>
    <div class="layer layer-emb" :class="{ active: active, notify: isNotify }">
        <!-- 图片内容 -->
        <div class="layer-info">

            <EmbroideryPreview :stitches="stitches" :colors="colors" v-if="dst.type == 'upload'" />

            <div class="embroidery-preview" v-if="dst.type == 'text'">
                <img src="@/assets/images/designer/dialog-emb-text.png" alt="">
            </div>

            <div class="layer-info-names">
                <strong v-if="dst.type == 'upload'" v-text="dst.dst_name"></strong>
                <strong v-if="dst.type == 'text'" v-text="dst.font_text"></strong>
                <span v-text="dst.stitches_count + ' stitches'"></span>
            </div>

            <!-- <h2 v-text="layerText"></h2> -->
            <div class="handle" @click="setActive(dst)"></div>
            <div class="layer-info-button">
                <slot></slot>
            </div>
        </div>

        <!-- 图片因数 -->
        <div class="layer-factor">

            <div class="factor-edit" v-if="dst.type == 'text'">
                <button @click="editEmb(dst)">Edit</button>
            </div>

            <!-- 位置大小 -->
            <div class=" factor-input">
                <UxInputNumber name="Right" unit="%" v-model="dstLeft" :precision="2" :step="0.1" :min="0" :max="100" />
                <UxInputNumber name="Down" unit="%" v-model="dstTop" :precision="2" :step="0.1" :min="0" :max="100" />
            </div>

            <div class="factor-input factor-rotate">
                <UxInputNumber name="Rotate" unit="deg" v-model="layerRotate" :step="1" :min="0" :max="360" />
                <button @click="layerRotate = 0">0</button>
                <button @click="layerRotate = 90">90</button>
                <button @click="layerRotate = 180">180</button>
                <button @click="layerRotate = 270">270</button>
            </div>

            <!-- 对齐 -->
            <div class="factor-align">
                <button @click="setAlign('left')" title="Left align">
                    <svg-icon name="tooler-left" />
                </button>
                <button @click="setAlign('center')" title="Horizontal center align">
                    <svg-icon name="tooler-center" />
                </button>
                <button @click="setAlign('right')" title="right align">
                    <svg-icon name="tooler-right" />
                </button>
                <button @click="setAlign('top')" title="Top align">
                    <svg-icon name="tooler-top" />
                </button>
                <button @click="setAlign('middle')" title="Vertical center align">
                    <svg-icon name="tooler-middle" />
                </button>
                <button @click="setAlign('bottom')" title="Bottom align">
                    <svg-icon name="tooler-bottom" />
                </button>
            </div>

            <div class="factor-colors" v-if="dst.type == 'upload'">
                <h3>
                    <span>Thread colors</span>
                    <a>
                        <svg-icon name="edit" @click.native="editEmb(dst)" />
                        <em @click="editEmb(dst)">Edit</em>
                    </a>
                </h3>

                <ul>
                    <li v-for="(color, index) in colors" :key="index" :style="{ backgroundColor: color.hex }">
                        <em></em>
                        <i v-text="index + 1"></i>
                    </li>
                </ul>

            </div>

        </div>
    </div>
</template>

<script>

import { mapGetters, mapState } from "vuex";
import { getStitchesByBase64 } from "@/utils/EmbroideryDst.js";
import { colors, Pattern } from "@/utils/EmbroideryPattern.js";
import DesignResource from "@/utils/DesignResource.js";
import DesignUtils from "@/utils/DesignUtils.js";
export default {
    props: {
        dst: { type: Object, required: true },
        layer: { type: Object, required: true },
        piece: { type: Object, required: true },
    },
    data () {
        return {
            fontsJson: DesignResource.fontsJson,
            attribute: null,
        };
    },
    computed: {
        ...mapState("designer", { oversizeDst: "oversize_dst", overlapDst: "overlap_dst" }),
        ...mapGetters('designer', {
            activeLayer: 'getActiveLayer',
            activeDst: 'getActiveDst',
            platens: "getPlatens",
            activePieceLayers: 'getActivePieceLayers'
        }),
        active () {
            return this.dst == this.activeDst;
        },

        stitches () {
            return getStitchesByBase64(this.dst.stitches)
        },
        colors () {
            const codes = this.dst.line_color.split(',').filter(i => i)
            return codes.map(i => colors.find(c => c.code == i)).filter(i => i)
        },

        isNotify () {
            if (this.oversizeDst.find(i => i.layer == this.layer && i.dst == this.dst)) {
                return true;
            } else if (this.overlapDst.find(i => i.layer == this.layer && i.dst == this.dst)) {
                return true
            } else {
                return false
            }
        },

        dstRange () {

            const layer = this.layer || {}
            const dst = this.dst || {}
            const real = DesignUtils.rectRealSize(dst.w, dst.h, dst.rotate)

            // 移动限制
            const range = {
                minX: 0.5 * real.width - 0.5 * dst.w,
                maxX: layer.w - 0.5 * real.width - 0.5 * dst.w,
                minY: 0.5 * real.height - 0.5 * dst.h,
                maxY: layer.h - 0.5 * real.height - 0.5 * dst.h
            }

            return range
        },

        layerRotate: {
            get () {
                return this.dst.rotate || 0;
            },
            set (value) {
                // const rotate = value - this.piece.canvas_rotate;
                // const rotate = value;
                // const format = parseInt((rotate) % 360) || 0;
                this.setChange({ rotate: value })
            }
        },


        dstLeft: {
            get () {
                const dst = this.dst;
                const min = this.dstRange.minX
                const max = this.dstRange.maxX
                return 100 * (dst.x - min) / (max - min)
            },
            set (value) {
                if (this.dstLeft != value) {
                    const min = this.dstRange.minX
                    const max = this.dstRange.maxX
                    const val = (max - min) * value / 100 + min
                    this.setChange({ x: val })
                }
            }
        },

        dstTop: {
            get () {
                const dst = this.dst;
                const min = this.dstRange.minY
                const max = this.dstRange.maxY
                return 100 * (dst.y - min) / (max - min)
            },
            set (value) {

                if (this.dstTop != value) {
                    const min = this.dstRange.minY
                    const max = this.dstRange.maxY
                    const val = (max - min) * value / 100 + min
                    this.setChange({ y: val })
                }
            }
        },

    },

    methods: {

        // 选中
        setActive (dst) {
            if (this.activeDst == dst) {
                this.$store.commit("designer/SET_ACTIVE_DST_INDEX", -1);
            } else {
                if (!this.activeLayer) {
                    // 找到选中绣框
                    this.$store.commit("designer/SET_ACTIVE_LAYER", this.layer);
                }
                this.$store.commit("designer/SET_ACTIVE_DST_INDEX", this.layer.dists.indexOf(dst));
            }
        },

        // 对齐方式
        setAlign (type) {

            if (type == 'left') {
                // 水平居左
                this.dstLeft = 0;
            } else if (type == 'center') {
                // 水平居中
                this.dstLeft = 50;
            } else if (type == 'right') {
                // 水平居右
                this.dstLeft = 100;
            } else if (type == 'top') {
                // 垂直居上
                this.dstTop = 0;
            } else if (type == 'middle') {
                // 垂直居中
                this.dstTop = 50;
            } else if (type == 'bottom') {
                // 垂直居下
                this.dstTop = 100;
            }
        },

        setChange (opt) {
            this.$store.commit('designer/SET_DST_VALUE', opt);
            this.$emit('global:DESIGN_NOTIFY_CHECK')
            this.$emit('global:DESIGN_NOTIFY_LIMIT')
        },

        editEmb (dst) {


            if (dst.type == 'upload') {
                // 修改版带
                const option = {
                    stitches: dst.stitches,
                    stitches_count: dst.stitches_count,
                    line_color: dst.line_color,
                    dst_name: dst.dst_name,
                    dst_width: dst.dst_width,
                    dst_height: dst.dst_height,
                    callback: (dst) => {
                        this.setChange({ line_color: dst.line_color })
                        this.$store.commit("designer/SET_ACTIVE_LAYER_PRICE", this.activeLayer);
                    }
                }
                this.$emit("global:DESIGN_OPEN_EMB_DST_EDIT_DIALOG", option);

            } else {

                const platen = this.platens.find(i => i.code == this.layer.platens_id)

                // 修改文字
                const option = {
                    stitches: dst.stitches,
                    stitches_count: dst.stitches_count,
                    line_color: dst.line_color,
                    dst_name: dst.dst_name,
                    dst_width: dst.dst_width,
                    dst_height: dst.dst_height,
                    font_text: dst.font_text,
                    font_envelop: dst.font_envelop,
                    font_arc: dst.font_arc,
                    font_size: dst.font_size,
                    font_family: dst.font_family,
                    platen: platen,
                    callback: (res) => {

                        const piece = this.piece;
                        const layer = this.layer;
                        const scale = piece.canvas_zoom / (piece.emb_zoom || 1);
                        const w = scale * 300 * res.dst_width / 254 // 图片最终显示宽度, mm转英寸转300dpi之后缩放
                        const h = scale * 300 * res.dst_height / 254 // 图片最终显示调试, mm转英寸转300dpi之后缩放
                        const x = (layer.w - w) / 2
                        const y = (layer.h - h) / 2;
                        const rotate = res.dst_width > platen.width * 254 / 300 ? 90 : 0;

                        const dst = {
                            dst_width: res.dst_width, // 单位是0.1mm
                            dst_height: res.dst_height, // 单位是0.1mm
                            font_text: res.font_text,
                            font_envelop: res.font_envelop,
                            font_arc: res.font_arc,
                            font_size: res.font_size,
                            font_family: res.font_family,
                            line_color: res.line_color,
                            stitches: res.stitches,
                            stitches_count: res.stitches_count,
                            x: x,
                            y: y,
                            w: w,
                            h: h,
                            rotate: rotate,
                        }

                        this.setChange(dst)
                        this.$store.commit("designer/SET_ACTIVE_LAYER_PRICE", this.activeLayer);

                    }
                }
                this.$emit("global:DESIGN_OPEN_EMB_TXT_EDIT_DIALOG", option);

            }

        },
        // 获取循环的数组
        getLoop (codes) {
            let index = 0;
            const isLoop = (arr, count) => {
                if (count > arr.length) {
                    return false;
                } else {
                    const len = Math.ceil(arr.length / count)
                    const split = new Array(len).fill('0').map((k, i) => arr.slice(i * count, i * count + count))
                    const str = arr.slice(0, count).join('-')
                    const diff = split.filter(i => str.indexOf(i.join('-')) == 0)

                    return diff.length == split.length
                }
            }

            while (++index < codes.length) {
                if (isLoop(codes, index)) {
                    break;
                }
            }

            return codes.slice(0, index)
        },
    },

};
</script>
<style lang="scss" scoped>
.layer-info {
    .embroidery-preview {
        margin-left: 12px;
        width: 40px;
        height: 40px;
        position: relative;
        overflow: hidden;
        border-radius: 4px;
        border: 1px solid #e6e6e6;
        background: #fafafa;

        &>img {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 22px;
            height: 22px;
            margin-left: -11px;
            margin-top: -11px;
        }
    }

    .layer-info-names {
        display: flex;
        flex-direction: column;
        margin-left: 6px;
        flex: 1;
        overflow: hidden;

        strong {
            font-family: Roboto, Roboto;
            font-weight: 400;
            font-size: 14px;
            color: #000000;
            line-height: 16px;
            text-align: left;
            font-style: normal;
            overflow: hidden;
            width: 100%;
            display: block;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        span {
            margin-top: 4px;
            font-family: Roboto, Roboto;
            font-weight: 400;
            font-size: 14px;
            color: #555555;
            line-height: 16px;
            text-align: left;
            font-style: normal;
        }
    }
}

.factor-edit {
    padding: 0 12px;
    display: flex;
    margin-top: 16px;

    button {
        flex: 1;
        height: 32px;
        border-radius: 6px;
        border: 1px solid #666666;

        &:hover {
            border-color: #ea4c89;
        }
    }
}

.layer-factor {
    .factor-rotate {
        padding: 0 3px;
        flex-wrap: nowrap !important;

        .input-number::v-deep input {
            padding-right: 48px;
        }

        button {
            min-width: 38px;
            height: 32px;
            margin: 34px 3px 0;
            font-family: Roboto, Roboto;
            font-weight: 400;
            font-size: 14px;
            line-height: 16px;
            text-align: right;
            border-radius: 4px;
        }
    }

    .factor-colors {
        margin-top: 16px;
        margin-bottom: -4px;

        h3 {
            margin: 0 12px;
            display: flex;
            align-items: center;

            span {
                font-family: Roboto, Roboto;
                font-weight: 400;
                font-size: 14px;
                color: #292929;
                line-height: 14px;
                text-align: left;
                font-style: normal;
            }

            a {
                display: flex;
                justify-content: center;
                align-items: center;
                background: #FFFFFF;
                width: 54px;
                height: 22px;
                border-radius: 12px;
                box-sizing: border-box;
                border: 1px solid #292929;
                color: #292929;
                cursor: pointer;
                margin-left: 4px;


                svg {
                    width: 12px;
                    height: 12px;
                }

                em {
                    font-family: Roboto-Medium, Roboto;
                    font-weight: 500;
                    font-size: 14px;
                    line-height: 16px;
                    text-align: right;
                    margin-left: 2px;
                }

                &:hover {
                    border-color: #ea4c89;
                    color: #ea4c89;
                }
            }

        }

        ul {
            display: flex;
            flex-wrap: wrap;
            margin: 10px 8px 0;

            li {
                width: calc(10% - 6px);
                border: 1px solid rgba(0, 0, 0, 0.2);
                box-sizing: border-box;
                margin: 3px;
                border-radius: 2px;
                overflow: hidden;
                position: relative;

                em {
                    display: block;
                    padding-bottom: 100%;
                }

                i {
                    position: absolute;
                    font-family: Roboto, Roboto;
                    left: 50%;
                    top: 50%;
                    line-height: 12px;
                    font-size: 12px;
                    transform: translate(-50%, -50%);
                    color: #fff;
                    text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
                    margin-top: 1px;
                }
            }
        }
    }
}
</style>
